<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="jakarta.faces.html"
                xmlns:f="jakarta.faces.core"
                xmlns:ui="jakarta.faces.facelets"
                xmlns:p="primefaces" 
                template="../templates/layout.xhtml">

    <f:metadata>
        <f:viewParam name="id" value="#{blogDetailView.blogId}"/>
        <f:event type="preRenderView" listener="#{blogDetailView.init()}"/>
    </f:metadata>

    <ui:define name="left">

    </ui:define>

    <ui:define name="content">
        <h:form prependId="false">


            <p:panel id="blog-panel" styleClass="w-full">
                <f:facet name="header">
                    <i class="pi pi-ellipsis-v mr-2"></i>
                    #{blogDetailView.blog.title}
                </f:facet>

                <f:facet name="actions">
                    <p:commandButton action="#{blogDetailView.openBlogEditor(blogDetailView.blog)}" 
                                     process="@this"
                                     icon ="ui-icon pi pi-pencil"
                                     styleClass="ui-panel-titlebar-icon ui-corner-all ui-state-default">
                        <p:ajax event="dialogReturn" listener="${blogDetailView.handleDialogReturn}" update="blog-panel"/>
                    </p:commandButton>
                </f:facet>

                <div class="flex align-items-center text-700 flex-wrap mb-5">
                    <div class="mr-5 flex align-items-center mt-3">
                        <i class="pi pi-user mr-2"/>
                        <span>#{blogDetailView.blog.user.username}</span>
                    </div>
                    <div class="mr-5 flex align-items-center mt-3">
                        <i class="pi pi-bars mr-2"/>
                        <span>#{blogDetailView.blog.category}</span>
                    </div>
                    <div class="mr-5 flex align-items-center mt-3">
                        <i class="pi pi-clock mr-2"/>
                        <h:outputText value="#{blogDetailView.blog.publishTime}">
                            <f:convertDateTime pattern="yyyy-MM-dd HH:mm:ss" timeZone="Asia/Shanghai"/>
                        </h:outputText>
                    </div>
                    <div class="flex align-items-center mt-3">
                        <i class="pi pi-comments mr-2"/>
                        <span>#{blogDetailView.blog.content.length()} 字</span>
                    </div>
                </div>

                <p:outputPanel>
                    <h:outputText escape="false" value="#{blogDetailView.blog.content}"/>
                </p:outputPanel>
                <p:divider/>

                <p:textEditor id="te-comment" 
                              value="#{blogDetailView.newComment}"
                              secure="false"
                              height="100px"
                              placeholder="写下你的评论..."
                              required="true"
                              styleClass="mb-3">
                    <f:facet name="toolbar">
                        <span class="ql-formats">
                            <button class="ql-bold"></button>
                            <button class="ql-italic"></button>
                            <button class="ql-underline"></button>
                            <button class="ql-strike"></button>
                        </span>
                        <span class="ql-formats">
                            <select class="ql-font"></select>
                            <select class="ql-size"></select>
                        </span>
                    </f:facet>

                </p:textEditor>
                <p:commandButton value="发表评论" 
                                 action="#{blogDetailView.addComment}"
                                 update="@form"
                                 styleClass="mb-5" />
                <div style="border-left: 3px blue solid;" class="px-2 mb-2">所有评论</div>

                <p:dataScroller value="#{blogDetailView.blog.commentList}"
                                var="comment">
                    <div class="flex align-items-center text-700 flex-wrap">
                        <p:outputPanel>
                            <h:outputText value="#{comment.comment}" escape="false"/>
                        </p:outputPanel>
                        <p:divider class="border-dashed border-1"/>
                    </div>
                </p:dataScroller>
            </p:panel>
        </h:form>
    </ui:define>

</ui:composition>
